<template>
    <div class="dashboard-container">
      <el-card class="header-card">
        <div class="header-content">
          <h1>我的云盘</h1>
          <el-button type="primary" @click="showUploadDialog = true">上传文件</el-button>
          <el-button type="info" @click="showSettings = !showSettings">设置</el-button>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
      </el-card>
      <el-card class="settings-card" v-if="showSettings">
      <div class="settings-content">
        <h2>设置</h2>
        <el-form :model="settingsForm" label-width="100px">
          <el-form-item label="界面颜色">
            <el-color-picker v-model="settingsForm.themeColor"></el-color-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveSettings">保存设置</el-button>
            <el-button @click="showSettings = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
      <el-card class="storage-info-card">
        <div class="storage-info">
          <div class="storage-details">
            <div class="storage-item">
              <span class="label">已用空间</span>
              <span class="value">2.5 GB</span>
            </div>
            <div class="storage-item">
              <span class="label">可用空间</span>
              <span class="value">22.5 GB</span>
            </div>
            <div class="storage-item">
              <span class="label">总空间</span>
              <span class="value">25 GB</span>
            </div>
          </div>
          <div class="storage-progress">
            <el-progress
              :percentage="10"
              :format="formatStorageProgress"
              color="#42b983"
            ></el-progress>
          </div>
        </div>
      </el-card>
  
      <el-card class="files-card">
        <div class="files-header">
          <h2>文件列表</h2>
          <div class="search-bar">
            <el-input
              v-model="searchQuery"
              placeholder="搜索文件"
              clearable
            >
              <template #append>
                <el-button icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </div>
        </div>
  
        <el-table :data="filteredFiles" style="width: 100%" v-loading="loading">
          <el-table-column prop="name" label="文件名" min-width="200">
            <template #default="scope">
              <i :class="getFileIcon(scope.row.type)"></i>
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column prop="size" label="大小" width="120">
            <template #default="scope">
              {{ formatFileSize(scope.row.size) }}
            </template>
          </el-table-column>
          <el-table-column prop="modified" label="修改时间" width="180">
            <template #default="scope">
              {{ formatDate(scope.row.modified) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button
                size="mini"
                type="primary"
                @click="downloadFile(scope.row)"
              >
                下载
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="deleteFile(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="files.length"
            :page-size="pageSize"
            v-model:current-page="currentPage"
          ></el-pagination>
        </div>
      </el-card>
  
      <el-dialog
        v-model="showUploadDialog"
        title="上传文件"
        width="40%"
        @closed="resetUploadForm"
      >
        <el-upload
          class="upload-demo"
          drag
          action=""
          :http-request="handleUpload"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
        </el-upload>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive,computed, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRoute, useRouter } from 'vue-router'
  
  const route = useRoute()
  const router = useRouter()
  
  // 文件上传对话框状态
  const showUploadDialog = ref(false)
  // 设置对话框状态
  const showSettings = ref(false)
  // 设置表单数据
  const settingsForm = reactive({
    themeColor: '#409EFF' // 默认主题颜色
  })
// 保存设置
const saveSettings = () => {
  // 保存主题颜色到本地存储
  localStorage.setItem('themeColor', settingsForm.themeColor)
  // 应用新的主题颜色
  document.documentElement.style.setProperty('--el-color-primary', settingsForm.themeColor)
  ElMessage.success('设置已保存')
  showSettings.value = false
}  
// 退出登录
const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    type: 'warning'
  })
    .then(() => {
      // 清除用户登录状态
      localStorage.removeItem('userInfo')
      ElMessage.success('已退出登录')
      // 发送退出登录事件到主进程
      // 使用预加载脚本中暴露的 API 发送登录成功事件
      if (window.electronAPI && window.electronAPI.sendLoginSuccess) {
          window.electronAPI.sendLogout();
        } else {
          console.error('Electron API not available in this environment');
        }
      // 跳转到登录页面
      router.push('/login')
    })
    .catch(() => {
      ElMessage.info('已取消退出')
    })
}
// 页面加载时应用保存的主题颜色
onMounted(() => {
  const savedThemeColor = localStorage.getItem('themeColor')
  if (savedThemeColor) {
    document.documentElement.style.setProperty('--el-color-primary', savedThemeColor)
    settingsForm.themeColor = savedThemeColor
  }
})
  // 模拟文件数据
  const files = ref([
    {
      id: 1,
      name: 'report.docx',
      type: 'document',
      size: 154000,
      modified: '2023-10-05T14:30:00'
    },
    {
      id: 2,
      name: 'photo.jpg',
      type: 'image',
      size: 2540000,
      modified: '2023-10-04T09:15:00'
    },
    {
      id: 3,
      name: 'project.pptx',
      type: 'presentation',
      size: 4540000,
      modified: '2023-10-03T16:45:00'
    },
    {
      id: 4,
      name: 'notes.txt',
      type: 'text',
      size: 12400,
      modified: '2023-10-02T11:30:00'
    }
  ])
  
  // 搜索相关
  const searchQuery = ref('')
  const filteredFiles = computed(() => {
    if (!searchQuery.value) {
      return files.value
    }
    return files.value.filter(file =>
      file.name.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  })
  
  // 分页相关
  const pageSize = ref(10)
  const currentPage = ref(1)
  
  // 加载状态
  const loading = ref(false)
  
  // 格式化存储进度
  const formatStorageProgress = percentage => {
    return `${percentage}% 已用`
  }
  
  // 获取文件图标
  const getFileIcon = type => {
    const iconMap = {
      document: 'el-icon-document',
      image: 'el-icon-picture',
      presentation: 'el-icon-picture-outline',
      text: 'el-icon-tickets'
    }
    return iconMap[type] || 'el-icon-document'
  }
  
  // 格式化文件大小
  const formatFileSize = size => {
    if (size < 1024) return `${size} B`
    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
    if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MB`
    return `${(size / 1024 / 1024 / 1024).toFixed(1)} GB`
  }
  
  // 格式化日期
  const formatDate = dateStr => {
    const date = new Date(dateStr)
    return date.toLocaleString()
  }
  
  // 上传文件
  const handleUpload = ({ file }) => {
    loading.value = true
    // 模拟上传过程
    setTimeout(() => {
      loading.value = false
      ElMessage.success(`${file.name} 上传成功`)
      // 实际应用中，这里应该通过 API 将文件上传到服务器
      // 并在成功后刷新文件列表
      // 关闭对话框
    showUploadDialog.value = false;
    }, 1500)
  }
  
  // 下载文件
  const downloadFile = file => {
    ElMessage.info(`${file.name} 下载中...`)
    // 实际应用中，这里应该触发文件下载逻辑
  }
  
  // 删除文件
  const deleteFile = file => {
    ElMessageBox.confirm(`确定要删除文件 ${file.name} 吗？`, '提示', {
      type: 'warning'
    })
      .then(() => {
        loading.value = true
        // 模拟删除过程
        setTimeout(() => {
          loading.value = false
          const index = files.value.findIndex(f => f.id === file.id)
          if (index !== -1) {
            files.value.splice(index, 1)
            ElMessage.success(`${file.name} 删除成功`)
          }
        }, 1000)
      })
      .catch(() => {
        ElMessage.info('已取消删除')
      })
  }
  
  // 重置上传表单
  const resetUploadForm = () => {
    // 清空上传队列等操作
  }
  
  // 页面加载时的初始化操作
  onMounted(() => {
    // 实际应用中，这里应该从服务器获取用户文件列表
  })
  </script>
  
  <style scoped>
  .dashboard-container {
    padding: 20px;
  }
  
  .header-card {
    margin-bottom: 20px;
  }
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header-actions {
    display: flex;
    gap: 10px;
  }
  .settings-card {
    margin-bottom: 20px;
    width: 400px;
  }
  .settings-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .storage-info-card {
    margin-bottom: 20px;
  }
  
  .storage-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .storage-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .storage-item {
    display: flex;
    align-items: center;
  }
  
  .label {
    color: #999;
    margin-right: 10px;
  }
  
  .files-card {
    margin-bottom: 20px;
  }
  
  .files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .search-bar {
    width: 300px;
  }
  
  .pagination {
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }
  </style>